<template>
    <!-- project页面下的项目类型分布图表 -->
    <div class="p-chart-xmlxfb"></div>
</template>

<script>
import service from '@/service/projects';
export default {
    data(){
        return{
            chart:null
        }
    },
    mounted(){
        //loading加载
        this.chart = echarts.init(document.querySelector('.p-chart-xmlxfb'));
        this.chart.showLoading({
            text:''
        });

        //获取API数据
        service.getDatas({
            columns: ["project_type", "count:id"],
            group: ["project_type"],
            order: [["count:id", 1]],
            // pi_zhun_nian_fen: 2019,
            pageSize: 8,
        }, '1061').then((res) => {
            let chartData = [];
            for(let item of res.data){
                //处理数据
                chartData.push({
                    name:item.project_type,
                    value:item._count_id,
                    unit:'项'
                });
            }
            this.initChart(chartData);
        });

    },
    methods:{
        initChart(chartData){
            let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF','#FF8700', '#ffc300', '#00e473', '#009DFF'];
            let arrName = [];
            let arrValue = [];
            let sum = 0;
            let pieSeries = [],
                lineYAxis = [];
            // 数据处理
            chartData.forEach((v, i) => {
                arrName.push(v.name);
                arrValue.push(v.value);
                sum = sum + v.value;
            })
            // 图表option整理
            chartData.forEach((v, i) => {
                pieSeries.push({
                    name: '项目类型',
                    type: 'pie',
                    clockWise: false,
                    hoverAnimation: false,
                    radius: [60 - i * 9 + '%', 65 - i * 9+ '%'],
                    center: ["40%", "50%"],
                    label: {
                        show: false
                    },
                    data: [{
                        value: v.value,
                        name: v.name
                    }, {
                        value: sum - v.value,
                        name: '',
                        itemStyle: {
                            color: "rgba(0,0,0,0)"
                        }
                    }]
                });
                pieSeries.push({
                    name: '',
                    type: 'pie',
                    silent: true,
                    z: 1,
                    clockWise: false, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    radius: [60 - i * 9 + '%',65 - i * 9+ '%'],
                    center: ["40%", "50%"],
                    label: {
                        show: false
                    },
                    data: [{
                        value: 7.5,
                        itemStyle: {
                            color: "#E3F0FF"
                        }
                    }, {
                        value: 2.5,
                        name: '',
                        itemStyle: {
                            color: "rgba(0,0,0,0)"
                        }
                    }]
                });
                v.percent = (v.value / sum * 100).toFixed(1) + "%";
                lineYAxis.push({
                    value: i,
                    textStyle: {
                        rich: {
                            circle: {
                                color: color[i],
                                padding: [0, 5]
                            }
                        }
                    }
                });
            })
            let option = {
                backgroundColor: '#fff',
                color: color,
                legend: [{
                    itemGap:5,
                    bottom:20,
                    left:20,
                    data:['国家一般','教育部重点','教育部青年','国家青年']
                },
                {
                    itemGap:5,
                    left:20,
                    bottom:0,
                    data:['西部项目','国家重大','教育部专项']
                }],
                grid: {
                    top: '5%',
                    bottom: '53%',
                    left: "37%",
                    containLabel: false
                },
                yAxis: [{
                    type: 'category',
                    inverse: true,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: function(params) {
                            let item = chartData[params];
                            return '{line|}{circle|●}{name|'+ item.name +'}{bd||}{percent|'+item.percent+'}{value|'+ item.value+'}{unit|项}'
                        },
                        interval: 0,
                        inside: true,
                        textStyle: {
                            color: "#333",
                            fontSize: 14,
                            rich: {
                                line: {
                                    width:10,
                                    height: 5,
                                },
                                name: {
                                    color: '#666',
                                    fontSize: 13,
                                },
                                bd: {
                                    color: '#ccc',
                                    padding: [0, 5],
                                    fontSize: 13,
                                },
                                percent:{
                                    color: '#333',
                                    fontSize: 13,
                                },
                                value: {
                                    color: '#333',
                                    fontSize: 13,
                                    fontWeight: 500,
                                    padding: [0, 0, 0, 10]
                                },
                                unit: {
                                    fontSize: 13,
                                }
                            }
                        },
                        show: true
                    },
                    data: lineYAxis
                }],
                xAxis: [{
                    show: false
                }],
                series: pieSeries
            };

            this.chart.setOption(option);
            // 加载结束
            this.chart.hideLoading();

            window.addEventListener("resize",()=>{
                this.chart.resize();
            });
        }
    }
}
</script>

<style scoped lang="scss">
    .p-chart-xmlxfb{
        position: relative;
        height: 350px !important;
        width: 100%;
    }
</style>